import React, { Component } from 'react';
import { connect } from 'react-redux';
import propTypes from 'prop-types';
import axios from '../../axios';
import './index.less';


class ArticleDetail extends Component {
	render() {
		const { article } = this.props;
		return (
			<div className="article-detail">
				<div dangerouslySetInnerHTML={{ __html: article ? article.content : '' }}></div>
			</div>
		);
	}
	UNSAFE_componentWillMount() {
		const { match, articleList, getArticleList, setCurrentArticle } = this.props;
		const articles = articleList.filter(item => item._id === match.params.id);
		if (articles.length > 0) {
			setCurrentArticle(articles[0]);
		} else {
			getArticleList(match.params.id);
		}
	}
}
ArticleDetail.propTypes = {
	match: propTypes.object,
	article: propTypes.object,
	articleList: propTypes.array,
	getArticleList: propTypes.func,
	setCurrentArticle: propTypes.func
};
const mapState = state => ({
	article: state.article.current,
	articleList: state.article.list
});
const mapDispatch = dispath => ({
	getArticleList: (id) => {
		axios.get(`https://api.justdodo.cn/acticles/${id}`).then(res => {
			dispath({
				type: 'SET_CURRENT_ARTICLE',
				data: res.data.data
			});
		});
	},
	setCurrentArticle(data) {
		dispath({
			type: 'SET_CURRENT_ARTICLE',
			data: data
		});
	}
});
export default connect(mapState, mapDispatch)(ArticleDetail);